<template>
	<view class="bf pt20">
		<!-- 总体评分 -->
		<view class="f-s-c m02 p32 bs20 bf5a">
			<view class="f50 mr20 wei">{{result.average}}</view>
			<view class="f-col f24">
				<view>总体评分</view>
				<view><u-rate active-color="#F7BA2A" :current="result.average" :disabled="true" ></u-rate></view>
			</view>
			<view class="f-g-1 t-r" @click="go({t:1,url:'/yb_shd/dp/assess/overview?data=' + overViewData})">评价统计</view>
		</view>
		<!-- 评价 -->
		<u-dropdown ref="uDropdown" :active-color="tColor">
					<u-dropdown-item @change="changeType" v-model="query.star" :title="typeTitle" :options="paramsArr.type"></u-dropdown-item>
					<u-dropdown-item :title="dateTitle">
						<view @click="changeTimeType(item)" v-for="item in paramsArr.timeType" :key="item.value" class="bf" style="padding: 26rpx 32rpx;border-top: 1px solid #f6f7f9;">
							<text>{{item.label}}</text>
						</view>
						<view @click="changeTimeType({label: '自定义',value: 4})" class="bf" style="padding: 26rpx 32rpx;border-top: 1px solid #f6f7f9;">
							<text>自定义</text>
							<text class="ml50" @click.stop="showrl=true">
								<text class="mr20">{{query.startTime}}</text>
								至
								<text class="ml20">{{query.endTime}}</text>
							</text>
						</view>
					</u-dropdown-item>
		</u-dropdown>
		<fill-height-scroll-view @scrolltolower="nextPage" backgroundColor="#F5F5F5">
			<template slot="element" class="pb30">
			<view class="card" v-for="item in result.list" :key="item.id">
				<view class="f-s-c">
					<view class="mr20"><image :src="item.portrait" mode="heightFix" class="bsf" style="width: 80rpx;height: 80rpx;"></image></view>
					<view class="f24">
						<view class="wei">{{item.userName}}</view>
						<view class="m10"><u-rate active-color="#F7BA2A" :size="28" :current="item.star" :disabled="true" ></u-rate><text  class="ca">总分{{item.star}}</text></view>
						<view class="ca">{{item.createdAt}}</view>
					</view>
				</view>
				<view class="mt20">{{item.body}}</view>
				<view v-if="item.media.length > 0" class="f-raw">
					<view v-for="img in item.media" :key="img" class="mt10 mr10">
						<image :src="img" mode="widthFix" class="bs10" style="width: 100rpx;height: 100rpx;"></image>
					</view>
				</view>
				<view class="f24 ca m20">
					订单详情：
					<text v-for="(goods,index) in item.goods" :key="goods.id">
						{{goods.name}}
						<text v-if="goods.data">({{goods.data}})</text>
						*{{goods.num}}
						<text v-if="index!=item.goods.length-1">、</text>
					</text>
					
				</view>
				<view v-if="item.reply" class="ca p12 bf679 bs10">
					商家回复：{{item.reply}}
				</view>
				<view class="mt20 t-r wei f24">
					<text class="tag-btn mr10" @click="handleSubmit(item.id,4)">删除</text>
					<text class="tag-btn" @click="handleSubmit(item.id,3)">回复</text>
				</view>
			</view>
			<!-- 空布局 -->
			<mescroll-empty v-if="result.list.length === 0" :option="{tip:'~ 暂无评价 ~'}"></mescroll-empty>
			</template>
		</fill-height-scroll-view>
		<u-calendar v-model="showrl" mode="range" :btnstyle="{ background: '#FE9367' }" range-color="#FE9367"
			range-bg-color="rgba(253,215,75,0.2)" active-bg-color="#FE9367" @change="changeDate"></u-calendar>
			<u-mask :show="focus" @click="focus = false">
				<view class="reply" :style="{bottom:inputOffsetBottom+'px'}" @tap.stop>
					<textarea placeholder-class="ca" v-model="params.reply" :focus="focus" :maxlength="maxlength" :placeholder='`您的回复会被公开展示,请注意措辞,最多${maxlength}字...`' class="w100"></textarea>
					<view class="t-r">{{params.reply.length}}/{{maxlength}}</view>
					<view class="mt20 t-r" @click="replySubmit"><text class="reply-btn" :style="{background:ztqs.submit}">回复</text></view>
				</view>
			</u-mask>
	</view>
</template>

<script>
	import FillHeightScrollView from '@/yb_shd/dp/components/fill-height-scroll-view.vue'
	import util from '@/common/utils.js'
	import MescrollEmpty from '@/mescroll-uni/components/mescroll-empty.vue';
	export default {
		components: {
			FillHeightScrollView,
			MescrollEmpty
		},
		data() {
			return {
				lockPage:false, 
				show:false,
				maxlength:300,
				focus:false,
				inputOffsetBottom:0,
				params:{
					id:null,
					type:'',
					reply:''
				},
				query:{
					page:1,
					star:'0', // 0不限 1好 2中评 3差评
					timeType:'1', // 0不限 1今天 2近七天 3近十五天 4具体时间
					key:'',
					startTime:new Date(new Date().setDate((new Date().getDate()-7))).format('yyyy-MM-dd'),
					endTime:new Date().format('yyyy-MM-dd')
				},
				showrl:false,
				paramsArr:{
					type:[{label: '不限',value: 0},{label: '好评',value: 1},{label: '中评',value: 2},{label: '差评',value: 3}],
					timeType:[
						{label: '今天',value: 1},{label: '近七天',value: 2},{label: '近十五天',value: 3}
					]
				},
				result:{
					list:[]
				},
				overViewData:'',
				dateTitle:"今天",
				typeTitle:'不限'
			}
		},
		computed:{
			ztqs() {
				return {
					submit:`linear-gradient(90deg, ${util.jjldColor(this.tColor,40)}, ${this.tColor})`,
				}
			},
		},
		async onLoad(options) {
			// this.util.setNT('订单查询')
			this.fetchData()
		},
		onReady() {
			// 监听键盘高度变化，以便设置输入框的高度
			  uni.onKeyboardHeightChange(res => {
			    this.inputOffsetBottom = res.height
				console.log(res.height)
				if(res.height === 0){
					console.log(res.height)
					// this.focus = false
				}
			  })
		},
		methods: {
			fetchData:util.debounceImmediate(async function(e){
				try{
					let {data} = await this.util.request({
						'url': this.api.assessCommentList,
						method:'GET',
						data:this.query
					})
					if(e[0] === 'nextPage'){
						if(data.list.length){
							this.query.list = this.query.list.concat(data.list)
							this.lockPage = false
						 }
						 // 确保没有内容的时候page不变  已知bug如果最后一条 list.length小于size 有新的评论进来了 会消失掉size-list.length条评论 
						 if(!this.lockPage){
							this.query.page++
						 }
						 this.lockPage = true
						return
					}
					this.result = data
					var overViewData = {
						good:data.good,
						goodStar:data.goodStar,
						middle:data.middle,
						middleStar:data.middleStar,
						difference:data.difference,
						differenceStar:data.differenceStar
					}
					this.overViewData = JSON.stringify(overViewData)
					console.log(this.overViewData)
				}catch(e){
					console.log(e)
					//TODO handle the exception
				}
			},200),
			nextPage(){
				this.fetchData('nextPage')
			},
			handleSubmit(id,type){
				this.params.id = id
				this.params.type = type
				if(type === 3){
					this.focus = true
				}else if(type ===4){
					this.deleteAssess()
				}
				
			},
			
			async replySubmit(){
				try{
					let {msg} = await this.util.request({
						'url': this.api.assessModifyComment,
						method:'POST',
						data:this.params
					})
					this.focus = false
					this.params = {
						id:null,
						type:'',
						reply:''
					},
					this.fetchData()
					this.util.message(msg, 3, 2000)
				}catch(e){
					this.util.message(e.msg, 3, 2000)
					//TODO handle the exception
				}
			},
			deleteAssess(){
				this.util.modal('您确认要删除此评论吗').then(async res=>{
					this.replySubmit()
				});
			},
			changeDate(e) {
				this.query.startTime = e.startDate
				this.query.endTime = e.endDate
			},
			changeTimeType(e){
				this.query.timeType = e.value
				this.dateTitle = e.label
				this.query.page = 1
				this.fetchData()
				this.$refs.uDropdown.close()
			},
			changeType(e){
				this.typeTitle = this.paramsArr.type[e].label
				this.query.page = 1
				this.fetchData()
			}
		},
	}
</script>

<style scoped lang="scss">
.reply{
	position: fixed;
	width: 100%;
	padding: 20rpx;
	background: #FFFFFF;
	.reply-btn{
		padding: 10rpx 30rpx;
		border-radius: 30rpx;
	}
	
}
.card{
	background: #fff;
    margin: 20rpx;
    border-radius: 20rpx;
    padding: 20rpx;		
}
.tag-btn{
	padding: 10rpx 20rpx;
	border-radius: 20rpx;
	border: 1px solid #f7f7f7;
}
</style>
